{% extends 'base.html' %}

{% block extra-head %}
<link rel="stylesheet" type="text/css"  media="screen" href="{{ MEDIA_URL }}tasks/tasks.css" />
{% endblock %}

{% block title %}Transparency through volunteering{% endblock %}

{% block content %}

<div class="span-5">
{% if user.is_anonymous %}
<h2>
Sign up to help make this the most accountable general election ever!
</h2>
<script type="text/javascript">
window.onload = function () { document.getElementById('id_first_name').focus(); }
</script>
<p>
<em><a href="/aboutus/">Democracy Club</a></em> is a new, independent network of volunteers who want to help internet-savvy transparency groups like <a href="http://www.mysociety.org/">mySociety</a> and <a href="http://www.thestraightchoice.org/">The Straight Choice</a> to hold election candidates and representatives to account. Both of these organisations endorse this project. If you sign up, we will (in time) suggest ways you might want to help them.
</p>
{% if form %}
  <form action="" method="post" id="signup">
  <table>
  {{ form.as_table }}
  <tr>
   <td></td>
   <td><input type="submit" value="sign up" /></td>
  </tr>
  </table>
  </form>
 {% endif %}
<p>
When you sign up, representatives of these organisations will occasionally suggest tasks by email, <a href="/aboutus/#what">such as</a> gathering information on general election candidates or finding and sharing election leaflets, to help them build awesome sites that will make the next election the most transparent ever. They'll also help you to collaborate with other volunteers in your area.
</p>
<!--<p>
We already know that mySociety wants to gather information on general election candidates, and TheStraightChoice wants you to help them find and share election leaflets. As the election approaches there'll be even more things to do, and you can be part of it.
</p>-->

<p class="small">mySociety and TheStraightChoice may occasionally suggest tasks for other transparency related groups, but we'll never share your private details with anyone except these two organisations, and we'll never send you more than two emails a week, no matter what.  Read our <a href="/aboutus/#privacy">terms and conditions</a> for more.</p>

{% else %}
<h2>Welcome, {{user.display_name}}</h2>

<h3>Thanks for signing up to help out in your constituency!</h3> 
<p>In time, we'll begin to send you occasional emails, asking if you can help with certain tasks. The first major task will be gathering information about candidates who are standing in the next election in your constituency. <a href="/aboutus/">Read about our purpose and what we're planning</a>.
<p>Until then, your next missions (should you choose to accept them) are:</p>
<ul>
<li>Please <a href='{% url inviteindex %}'>invite three friends</a> (or more!)</li>
<li>Consider <a href="{% url add_constituency %}">volunteering to help in other constituencies</a> (e.g. somewhere you're studying, or somewhere else very nearby)</li>
</ul>

<h3>Available tasks</h3>
{% include "tasks/task_list.html" %}
{% endif %}

</div>

<div class="span-3 last">
<div id="visualization"></div>
<p>We're trying to get volunteers in every part of the UK.  So far, we've recruited {{ volunteers }} volunteers in {{ count }} constituencies (out of a total {{ total }}).</p>
<p class="quiet">Right now we're signing people up to the current constituencies; things will automatically work with new constituencies as and when they're available.</p>

{% block js %}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  data.addRows(1);
  data.setValue(0, 0, '% complete');
  data.setValue(0, 1, {{percent_complete}});

  // Create and draw the visualization.
  var chart = new google.visualization.Gauge(document.getElementById('visualization'));
  var opts = {redFrom: 90, 
              redTo: 100, 
              yellowFrom: 75,
              yellowTo: 90, 
              greenFrom: 35, 
              greenTo: 75};

   chart.draw(data, opts);
}
google.setOnLoadCallback(drawVisualization);
</script>
{% endblock %}


{% endblock %}
